<template>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <div class="loginMain">
                    <!--头部-->
                    <div class="header">
                        <i class="logo">logo</i>
                        <span class="proName">货运车辆动态监督平台</span>
                    </div>
                    <!--登录块-->
                    <div class="login">
                        <div class="inp">
                            <el-input v-model="username" placeholder="请输入用户名"></el-input>
                        </div>
                        <div class="inp">
                            <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
                        </div>
                        <el-checkbox v-model="isRecord">记住登录信息</el-checkbox>
                        <el-button type="primary">登录系统</el-button>
                        <div class="loginBottom">
                            <i class="iconLogBot">
                                i
                            </i>
                            <span class="textSty">
                                系统检测安全，请放心使用。
                            </span>
                        </div>
                    </div>
                    <img src="../../assets/img/login/bg_login.jpg" alt="" class="bgLogin">
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import {apiAddress} from '@/api/api';// 导入api接口
    export default {
        name: 'Login',
        data() {
            return {
                username: '',
                password: '',
                isRecord: false
            }
        },
        mounted() {
            apiAddress({
                city: '成都'
            }).then(res => {
                console.log(res)
            })
        }
    }
</script>

<style lang="scss" scoped>
    .loginMain {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        .bgLogin {
            width: 100%;
            height: 100%;
        }

        .header {
            width: 100%;
            height: .8rem;
            position: absolute;
            top: 0;
            left: 0;
            background: #FFF;
            opacity: .8;
            display: flex;
            align-items: center;

            .logo {
                width: .58rem;
                line-height: .58rem;
                display: inline-block;
                padding: .11rem .5rem;
                color: #0099fe;
            }

            .proName {
                color: #0099fe;
                line-height: .58rem;
                border-left: 1px solid #cccccc;
                display: inline-block;
                font-size: .34rem;
                font-weight: bold;
                padding-left: .25rem;
            }
        }

        .login {
            width: 4.72rem;
            background: #FFF;
            border-radius: 10px;
            position: absolute;
            top: 1.57rem;
            right: 2.2rem;
            box-sizing: border-box;
            padding: .45rem .8rem;
            display: flex;
            flex-direction: column;

            .inp {
                flex: 1;
                margin-bottom: .25rem;
            }

            .el-checkbox__input.is-checked + .el-checkbox__label {
                color: #606266;
            }

            .el-button{
                font-size: 20px;
                margin-top: .25rem;
            }

            .loginBottom{
                flex: 1;
                margin-top: .3rem;
                .iconLogBot{
                    width: .24rem;
                    line-height: .28rem;
                    display: inline-block;
                    vertical-align:middle;
                }
                .textSty{
                    font-size: .14rem;
                    color: #0099fe;
                    line-height: .28rem;
                    display: inline-block;
                    vertical-align:middle;
                }
            }
        }
    }
</style>
